<template>
	<el-card>
		<el-form inline label-width="100px" :model="queryParams" ref="form">
			<el-form-item label="专区名称">
				<el-input v-model="queryParams.zoneName" size="mini" clearable />
			</el-form-item>
			<el-form-item label="显示角标">
				<el-select v-model="queryParams.badge" size="mini" clearable>
					<el-option value="0" label="隐藏"></el-option>
					<el-option value="1" label="显示"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="专区类型">
				<el-select v-model="queryParams.type" size="mini" clearable>
					<el-option value="1" label="分类"></el-option>
					<el-option value="2" label="链接"></el-option>
					<el-option value="3" label="业务线"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="状态">
				<el-select v-model="queryParams.state" size="mini" clearable>
					<el-option value="0" label="隐藏"></el-option>
					<el-option value="1" label="显示"></el-option>
				</el-select>
			</el-form-item> 
		</el-form>
		<el-row> 
			<el-col>
				<el-button icon="el-icon-search" type="primary" size="small" @click="getList">查询</el-button>
				<el-button icon="el-icon-refresh-right" size="small" @click="reset('form')">重置</el-button>
				<el-button style="float: right;" icon="el-icon-plus" type="success" size="small" @click="create">新增
				</el-button> 
			</el-col>
		</el-row>
		<el-table :data="zoneList">
			<el-table-column label="专区名称" prop="zoneName" width="180">
				<template slot-scope="scope">
					<el-tooltip
						:content="scope.row.zoneName"
						placement="bottom"
						effect="dark"
						class="nameBox"
					>
						<div>{{ scope.row.zoneName }}</div>
					</el-tooltip>
				</template>
			</el-table-column>
			<el-table-column label="显示角标" prop="badge">
				<template slot-scope="scope">
					<el-tag type="success" size="small" v-if="scope.row.badge == '1'">显示</el-tag>
					<el-tag type="danger" size="small" v-else>隐藏</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="角标文字" prop="badgeName">
				<template slot-scope="scope">
					<span v-if="scope.row.badge == '1'">{{ scope.row.badgeName }}</span>
				</template>
			</el-table-column>
			<el-table-column label="专区类型" prop="type">
				<template slot-scope="scope">
					<span v-if="scope.row.type == '1'">分类</span>
					<span v-else-if="scope.row.type == '2'">
						<a :href="scope.row.link" target="_blank">链接<br>{{ scope.row.link }}</a>
					</span>
					<span v-else-if="scope.row.type == '3'">业务线</span>
				</template>
			</el-table-column>
			<el-table-column label="商品类型" prop="goodsSource"></el-table-column>
			<el-table-column label="状态" prop="state" width="80px">
				<template slot-scope="scope">
					<el-tag type="success" size="small" v-if="scope.row.state == '1'">显示</el-tag>
					<el-tag type="danger" size="small" v-else>隐藏</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="排序" prop="sort" width="50px"></el-table-column>
			<el-table-column label="操作" fixed="right" width="200px">
				<template slot-scope="scope">
					<el-button type="primary" plain size="mini" @click="edit(scope.row)">编辑</el-button>
					<template v-if="scope.row.type != '3'">
						<el-button type="primary" size="mini" @click="hide(scope.row)">{{ scope.row.state == "0" ? "显示": "隐藏" }}</el-button>
					</template>
					<el-button type="text" size="mini" @click="remove(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-dialog :visible.sync="zoneCreate.visible" :title="zoneCreate.title" :close-on-click-modal="false">
			<el-form ref="form" :model="zoneCreate.form" :rules="rules" label-width="100px" label-suffix=":">
				<el-form-item label="专区名称" prop="zoneName"> 
					<el-input v-model="zoneCreate.form.zoneName" size="mini" clearable />
				</el-form-item>
				<el-form-item label="显示角标">
					<el-radio v-model="zoneCreate.form.badge" label="0" :disabled="zoneCreate.locakBadge">隐藏</el-radio>
					<el-radio v-model="zoneCreate.form.badge" label="1" :disabled="zoneCreate.locakBadge">显示</el-radio>
				</el-form-item>
				<el-form-item label="角标文字" v-if="zoneCreate.form.badge == '1'" prop="badgeName">
					<el-input v-model="zoneCreate.form.badgeName" size="mini" clearable />
				</el-form-item>
				<el-form-item label="专区类型">
					<el-radio v-model="zoneCreate.form.type" label="1">分类</el-radio>
					<el-radio v-model="zoneCreate.form.type" label="2">链接</el-radio>
					<el-radio v-model="zoneCreate.form.type" label="3">业务线</el-radio>
				</el-form-item>
				<el-form-item label="绑定分类" v-if="['1', '3'].indexOf(zoneCreate.form.type) > -1" prop="category">
					<div class="inner-category-box" v-loading="categotyLoading">
						<el-tree class="tree tree-category" ref="treeCategory" :data="categoryList"
							:default-checked-keys="categoryAuthList" show-checkbox :props="{label: 'categoryNameAll'}"
							:filter-node-method="filterNodeCategory" node-key="id">
							<div class="tree-item" slot-scope="{ node, data }">
								<div class="item">{{ node.label }}</div>
							</div>
						</el-tree>
					</div>
				</el-form-item>
				<el-form-item label="绑定链接" v-if="zoneCreate.form.type == '2'" prop="link">
					<el-input v-model="zoneCreate.form.link" size="mini" clearable />
				</el-form-item>
				<el-form-item label="商品类型" prop="goodsSource">
					<el-input v-model="zoneCreate.form.goodsSource" size="mini" clearable />
				</el-form-item>
				<el-form-item label="状态" prop="state" >
					<el-radio v-model="zoneCreate.form.state" label="0" :disabled="zoneCreate.lockState">隐藏</el-radio>
					<el-radio v-model="zoneCreate.form.state" label="1" :disabled="zoneCreate.lockState">显示</el-radio>
				</el-form-item>
				<el-form-item label="排序" prop="sort">
					<el-input-number v-model="zoneCreate.form.sort" size="mini" :min="0" :max="999" clearable />
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button size="small" @click="zoneCreate.visible = false">取消</el-button>
				<el-button size="small" type="primary" @click="save">确定</el-button>
			</span>
		</el-dialog>
	</el-card>
</template>

<script>
	import { allCategory } from "@/api/supplierActivity/supplier"
	import { itemZoneList, itemZoneCreate, itemZoneRemove, itemZoneById,itemZoneCategoryList } from "@/api/mall.api"

	export default {
		name: "item-zone",
		data() {
			var checkBadge = (rule, value, callback) => {
				if (this.zoneCreate.form.badge == "1") {
					if (!this.zoneCreate.form.badgeName) return callback(new Error("角标文字不能为空"))
				}
				callback()
			}
			var checkLink = (rule, value, callback) => {
				if (this.zoneCreate.form.type == "2") {
					if (!this.zoneCreate.form.link) return callback(new Error("绑定链接不能为空"))
				}
				callback()
			}
			var checkCategory = (rule, value, callback) => {
				if (["1", "3"].indexOf(this.zoneCreate.form.type) > -1) {
					const categoryIds = this.$refs.treeCategory.getCheckedKeys();
					if (categoryIds.length < 1) return callback(new Error("请至少选择一个分类"))
				}
				callback()
			}
			return {
				queryParams: {
					zoneName: undefined,
					badge: undefined,
					type: undefined,
					state: undefined,
				},
				zoneList: [],
				zoneCreate: {
					visible: false,
					title: "",
					form: {
						id: "",
						zoneName: "",
						badge: "0",
						badgeName: "",
						type: "1",
						goodsSource: "",
						link: "",
						state: "0",
						sort: 0
					},
					lockState: false,
					locakBadge: false
				},
				categotyLoading: false,
				categoryList: [],
				categoryAuthList: [],
				rules: {
					zoneName: [{
						required: true,
						trigger: 'blur',
						message: '请输入专区名称'
					}],
					badgeName: [{
						validator: checkBadge,
						trigger: 'blur'
					}],
					link: [{
						validator: checkLink,
						trigger: 'blur'
					}],
					category: [{
						validator: checkCategory,
						trigger: 'blur'
					}]
				}
			}
		},
		mounted() {
			this.getList();
		},
		methods: {
			reset(formName) {
				this.queryParams = {
					zoneName: undefined,
					badge: undefined,
					type: undefined,
					state: undefined,
				};
				this.$refs[formName].resetFields();
				this.getList();
			},
			getItemCategoryList(id) { 
				itemZoneCategoryList({id}).then(res => {
					this.categoryAuthList = res.map(item => item.categoryId);
				})
			},
			getList() {
				itemZoneList(this.queryParams).then(res => {
					this.zoneList = res;
				})
			},
			getCategoryList() {
				this.categotyLoading = true
				allCategory().then(res => {
					this.categoryList = res
					this.categotyLoading = false
				})
			},
			filterNodeCategory(value, data) {
				if (!value.toUpperCase()) return true
				return data.categoryNameAll.toUpperCase().indexOf(value.toUpperCase()) !== -1
			},
			create() {
				this.categoryList = []
				this.categoryAuthList = []
				this.zoneCreate.visible = true
				this.zoneCreate.title = "创建专区"
				this.zoneCreate.form = {
					id: "",
					zoneName: "",
					badge: "0",
					badgeName: "",
					type: "1",
					goodsSource: "",
					link: "",
					state: "0",
					sort: 0
				}
				this.getCategoryList()
			},
			save() {
				this.$refs.form.validate((valid) => {
					if (valid) {
						this.zoneCreate.visible = false
						const categoryIds = this.$refs.treeCategory.getCheckedKeys();
						const params = this.zoneCreate.form
						params.categoryIds = categoryIds;
						itemZoneCreate(params).then(res => {
							this.getList();
						})
					}
				})
			},
			remove(row) {
				this.$confirm("此操作将永久删除该分类，是否继续？", "提示", {
					confirmButtonText: "删除",
					cancelButtonText: "取消",
					type: "warning"
				}).then(() => {
					itemZoneRemove(row.id).then(res => {
						this.$message.success("删除成功")
						this.getList()
					})
				}).catch(() => {
					this.$message.info("取消删除")
				})
			},
			edit(row) {
				itemZoneById(row.id).then(res => {
					this.categoryList = [] 
					this.zoneCreate.visible = true
					this.zoneCreate.title = "编辑专区：" + res.zoneName
					this.zoneCreate.form = res
					 
					if (res.zoneListId) { 
						this.getItemCategoryList(res.zoneListId);
					}
					this.getCategoryList()
				})
			},
			hide(row) {
				const params = {
					id: row.id,
					state: row.state == "1"? "0" : "1"
				}
				itemZoneCreate(params).then(res => {
					this.getList();
				})
			}
		},
		watch: {
			'zoneCreate.form.type': {
				handler (value) {
					if(value == "3") {
						this.zoneCreate.lockState = true
						this.zoneCreate.form.state = "0"
						this.zoneCreate.locakBadge = true
						this.zoneCreate.form.badge = "0"
					}else {
						this.zoneCreate.lockState = false
						this.zoneCreate.locakBadge = false
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.inner-category-box {
		height: 60vh;
		max-height: 300px;
		overflow-y: scroll;
		border: 1px solid #eee;
	}
	.nameBox {
		overflow: hidden;
		max-width: 100%;
		white-space: nowrap;
		height: 25px;
		text-overflow: ellipsis;
	}
</style>
